<template>
  <div class="product">
    <div class="product-img">
      <!-- 热卖标识 -->
      <slot name="hot"></slot>
      <img class="auto-img" :src="pro.smallImg" alt="" />
    </div>
    <div class="product-zhname one-text">{{ pro.name }}</div>
    <div class="product-enname one-text">{{ pro.enname }}</div>
    <div class="product-price">
      &yen;{{ pro.price }}
      <slot name="del"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "product",

  props: {
    pro: {
      type: Object,

      //默认值
      default() {
        return {};
      },
    },
  },
};
</script>

<style lang="less" scoped>
.product {
    .auto-img {
      width: 100%;
      display: block;
    }
  .one-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-zhname {
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
  }
  .product-enname {
    color: #999;
  }
  .product-price {
    color: #0c34ba;
    font-size: 14px;
    margin-top: 5px;
    font-weight: bold;
  }
}
</style>